葫芦的运维日志

下一篇 搜索 上一篇

---

 django+kendoui 远端数据交互展示：

kendoui grid 带分页远端数据交互

django:

def gettnm2(request): 
    result=[{'tnm2_time':0000000,'service':'11','operator':'ww','level':12,'ci_name':2222,'alarm_content':22,'recover_time':23},
            {'tnm2_time':99,'service':'23','operator':'ww','level':12,'ci_name':2222,'alarm_content':22,'recover_time':23}]
    result.extend(result)
    result.extend(result)
    result.extend(result)
    result.extend(result)
    result.extend(result)
    return JsonResponse(result, safe=False)

html:

<input type="text" id="start_time" placeholder="开始时间">
<input type="text" id="end_time" placeholder="结束时间">
<div id="detail-table" class="mb30 demo">

javascript:

<script type="text/javascript">
        //kendoui-table
        var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/gettnm2/",
                    dataType: "json",
                    type: "POST",
                }
            }
        });
            $('#detail-table').kendoGrid({
            height: 400, //设置高度，超过显示滚动条
            sortable: true, //表头排序
            filterable: true,
                        pageable: {
                        refresh: true,
                        buttonCount: 5,
                        pageSizes: [20, 50, 100]
                    },
            dataSource: ds,
            columns: [
                {
                    field: 'tnm2_time',
                    title: '告警时间'
                },
                {
                    field: 'service',
                    title: '系统'
                },
                {
                    field: 'operator',
                    title: '负责人'
                }, {
                    field: 'level',
                    title: '级别'
                }, {
                    field: 'ci_name',
                    title: 'IP'
                },
                {
                    field: 'alarm_content',
                    title: '详情'
                }, {
                    field: 'recover_time',
                    title: '恢复时间'
                }, {
                    field: '进度',
                    title: '处理进度',
                    width: 150,
                    template: "<button type=\"button\" class=\"king-btn king-info\">处理</button>\n"
                }
            ],
        });
        $("#start_time").kendoDateTimePicker({
            value: new Date(),
            format: "yyyy-MM-dd hh:mm:ss"

        });
        var curDate = new Date();

        $("#end_time").kendoDateTimePicker(
            {

                value: new Date(curDate.getTime() + 24 * 60 * 60 * 1000),
                format: "yyyy-MM-dd hh:mm:ss"
            });
        $('.king-info').click(function () {
            var start_time = $('#start_time').val();
            var end_time = $('#end_time').val();
            ds.read({start_time: start_time, end_time: end_time});
        });
    </script>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇